<!DOCTYPE html>
<html>
        
        <head>
                <title>
                        Web通信demo
                </title>
                <link rel="stylesheet" href="vendor/bootstrap.min.css" />
                <script src="vendor/jquery.js">
                        
                
                </script>
                <script src="vendor/socket.io.js">
                        
                
                </script>
                <script src="vendor/adapter.js">
                        
                
                </script>
                <script src="AgoraRTCSDK-1.8.1.js">
                        
                
                </script>
        </head>
        
        <body>
                <div id="div_device" class="panel panel-default">
                        <div class="select">
                                <label for="audioSource">
                                        Audio source:
                                </label>
                                <select id="audioSource">
                                </select>
                        </div>
                </div>
                <div id="div_join" class="panel panel-default">
                        <div class="panel-body">
                                Key:
                                <input id="key" type="text" size="36" value="d51a586509bb4992a00b72a453df77a9" />
                                Channel:
                                <input id="channel" type="text" size="20" value="youxuanit" />
                                <button id="join" class="btn btn-primary" onclick="join()">
                                        Join
                                </button>
                                <button id="leave" class="btn btn-primary" onclick="leave()">
                                        Leave
                                </button>
                        </div>
                </div>
                <div id="audio" style="width:1022px;margin:0 auto;">
                        <div id="agora_local" style="float:right;width:1px;height:1px;display:inline-block;">
                        </div>
                </div>
                <div id="message" style="width:1022px;margin:0 auto;">
                </div>
                <script language="javascript">
                        
                        
var userid = (Math.random()*100).toFixed();
var client, localStream, camera, microphone;

var audioSelect = document.querySelector('select#audioSource');

function join() {
  document.getElementById("join").disabled = true;
  document.getElementById("audio").disabled = true;
  // for dynamic key start
  var dynamic_key;
  var use_https = ('https:' == document.location.protocol ? true : false);
  if (use_https) {
    var url_str = "https://192.168.1.21:8888/agora/php/key.php?uid=" + userid + "&channelName=" + channel.value;
  } else {
    alert('请使用https部署网站');return false;
  }
  $.ajax({
    url: url_str,
    error: function() {
      console.log("Failed to get 192.168.1.21 dynamic key");
    },
    success: function(response) {
      console.log("successful to get 192.168.1.21 dynamic key %s <===>" ,response);
      dynamic_key = response;

  //该方法创建和返回针对实时通信用户场景的客户端对象，包含音视频聊天和会议。该方法在每次会话里仅调用一次。
  client = AgoraRTC.createRtcClient();
  client.init(dynamic_key, function () {
    console.log("AgoraRTC client initialized");
    client.join(channel.value, userid, function(uid) {
      $("#message").append("<font color=#556B2F>我 " + uid + " 在 " + new Date().toLocaleString() + " 进入房间 </font><hr>");
        microphone = audioSource.value;
        localStream = AgoraRTC.createStream({streamID: uid, audio: true,  microphoneId: microphone, video: false, screen: false});
        //启用音频轨道 若是禁用音频轨道，使用disableAudio()
        localStream.enableAudio();
        //禁用视频轨道 若是启用视频轨道，使用enableVideo()，并且setVideoProfile(720p_3)设置视频属性
        //localStream.disableVideo();
        localStream.init(function() {
          //播放本地音频流(play)
          localStream.play('agora_local');
          client.publish(localStream, function (err) {
            console.log("Publish local stream error: " + err);
          });

          client.on('stream-published', function (evt) {
            console.log("本地音视频已上传");
          });
        }, function (err) {
          console.log("媒体设备获取失败", err);
        });
    }, function(err) {
      console.log("进入房间失败", err);
    });
  }, function (err) {
    console.log("AgoraRTC client 初始化失败", err);
  });

  client.on('stream-added', function (evt) {
    var stream = evt.stream;
    console.log("远程音视频流已添加，流ID： " + stream.getId());
    console.log("Subscribe ", stream);
    //订阅远程音视频流(subscribe)
    client.subscribe(stream, function (err) {
      console.log("订阅远程音视频流失败", err);
    });
  });

  client.on('stream-subscribed', function (evt) {
    var stream = evt.stream;
    console.log("远程音视频流已订阅，流ID： " + stream.getId());
    if ($('div#audio #agora_remote'+stream.getId()).length === 0) {
      $('div#audio').append('<div id="agora_remote'+stream.getId()+'" style="float:right; width:1px;height:1px;display:inline-block;"></div>');
    }
    //stream.getId() 即远程用户uid
    $("#message").append("<font>用户 " + stream.getId() + " 在 " + new Date().toLocaleString() + " 进入房间 </font><hr>");
    
    stream.enableAudio();
    stream.disableVideo();
    //播放远程订阅的音频流(play)
    stream.play('agora_remote' + stream.getId());
  });

  client.on('stream-removed', function (evt) {
    var stream = evt.stream;
    stream.stop();
    $('#agora_remote' + stream.getId()).remove();
    console.log("远程音视频流已删除，流ID： " + stream.getId());
  });

  client.on('peer-leave', function (evt) {
    var stream = evt.stream;
    stream.stop();
    $('#agora_remote' + stream.getId()).remove();
    $("#message").append("<font>用户 " + evt.uid + " 在 " + new Date().toLocaleString() + " 退出房间 </font><hr>");
  });
  }
  });
}

function leave() {
  document.getElementById("leave").disabled = true;
  client.leave(function () {
    $("#message").append("<font color=#556B2F>我 " + userid + " 在 " + new Date().toLocaleString() + " 退出房间 </font><hr>");
  }, function (err) {
    console.log("Leave channel failed");
  });
}

function publish() {
  document.getElementById("publish").disabled = true;
  client.publish(localStream, function (err) {
    console.log("Publish local stream error: " + err);
  });
}

function unpublish() {
  document.getElementById("publish").disabled = false;
  document.getElementById("unpublish").disabled = true;
  client.unpublish(localStream, function (err) {
    console.log("Unpublish local stream failed" + err);
  });
}

function getDevices() {
  AgoraRTC.getDevices(function (devices) {
    for (var i = 0; i !== devices.length; ++i) {
      var device = devices[i];
      var option = document.createElement('option');
      option.value = device.deviceId;
      if (device.kind === 'audioinput') {
        option.text = device.label || 'microphone ' + (audioSelect.length + 1);
        audioSelect.appendChild(option);
      } else if (device.kind === 'videoinput') {
//        option.text = device.label || 'camera ' + (videoSelect.length + 1);
//        videoSelect.appendChild(option);
      } else {
        console.log('Some other kind of source/device: ', device);
      }
    }
  });
}

getDevices();

                </script>
        </body>

</html>